<template>
	<div>
		<a-card :borderd="false" class="mb-2">
			<a-button type="primary" @click="tableRef.value.refresh()">搜索</a-button>
		</a-card>
		<a-card :borderd="false" class="mb-2">
			<h-table :paged="true" ref="tableRef" :data="getList" :columns="columns">
			</h-table>
		</a-card>
	</div>
</template>

<script setup>
import protocalApi from '@/api/protocal/protocalApi.js'

const tableRef = ref();

const columns = ref([
	{
		title: '协议名称',
		key: 'name',
		dataIndex: 'name',
		ellipsis: true,
	},
	{
		title: '启停状态',
		key: 'enable',
		dataIndex: 'enable',
		ellipsis: true,
		mapping: [
			{
				key: '1',
				value: '启用'
			},
			{
				key: '2',
				value: '停用'
			}
		]
	},
	{
		title: '备注',
		key: 'remark',
		dataIndex: 'remark',
		ellipsis: true,
	},
])
const config = ref({
	tableKey: 0,
	list: null,
	total: null,
	listLoading: true,
	listQuery: {
		importance: undefined,
		title: undefined,
		type: undefined
	},
	importanceOptions: [1, 2, 3],
	showReviewer: false,
	possessorTypeList: [
		{
			'id': 1,
			'name': '用户'
		},
		{
			'id': 2,
			'name': '通道'
		}
	],
	temp: {
		name: '',
		possessorType: 1,
		possessorId: 1

	},
	dialogFormVisible: false,
	dialogStatus: '',
	textMap: {
		update: '编辑',
		create: '新建'
	},
	dialogPvVisible: false,
	pvData: [],
	rules: {
		port: [{required: true, message: '端口必填', trigger: 'blur'}]
	},
	downloadLoading: false
})


const getList = async () => {
	let response = await protocalApi.fetchList(config.value.listQuery);
	return response;
}
</script>
